<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SiteServer 管理后台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link href="../assets/images/favicon.png" rel="icon" type="image/png" />
    <link
      href="../assets/css/font-awesome-4.7.0.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../assets/css/bootstrap.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../assets/css/siteserver.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <style>
      .nav .nav-link {
        font-weight: normal;
        border-radius: 1.25rem;
        font-size: 14px;
      }
    </style>
  </head>

  <body class="p-0">
    <div id="main" class="m-t-15 m-b-15 m-l-15 m-r-15">
      <template v-if="pageLoad">
        <div class="card-box" style="padding: 10px; margin-bottom: 10px">
          <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
              <a
                class="nav-link active"
                href="javascript:;"
                @click="{btnNavClick('logs.html')}"
                >数据列表</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                href="javascript:;"
                @click="{btnNavClick('fields.html')}"
                >字段管理</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                href="javascript:;"
                @click="{btnNavClick('settings.html')}"
                >选项设置</a
              >
            </li>
            <li class="nav-item" v-if="config.returnUrl">
              <a class="nav-link" :href="config.returnUrl">返回列表</a>
            </li>
          </ul>
        </div>
        <div
          v-if="pageAlert"
          class="alert"
          :class="{ 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }"
        >
          <button
            v-on:click="pageAlert = null"
            class="close"
            data-dismiss="alert"
          >
            ×
          </button>
          <span v-html="pageAlert.html"></span>
        </div>
        <div class="card-box">
          <form v-on:submit="btnSubmitClick">
            <div class="row">
              <div class="col-md-12">
                <h4 v-if="$logId" class="m-t-0 m-b-30 header-title">修改</h4>
                <h4 v-else class="m-t-0 m-b-30 header-title">新增</h4>
                <div
                  v-for="fieldInfo in fieldInfoList"
                  :key="fieldInfo.id"
                  class="form-group"
                >
                  <label>
                    {{ fieldInfo.title }}
                    <span
                      v-if="fieldInfo.validate.indexOf('required') !== -1"
                      class="text-danger"
                      >*</span
                    >
                    <small
                      v-show="errors.has(fieldInfo.title)"
                      class="text-danger"
                      >{{ errors.first(fieldInfo.title) }}</small
                    >
                  </label>
                  <template v-if="fieldInfo.fieldType === 'TextArea'">
                    <textarea
                      v-model="fieldInfo.value"
                      class="form-control"
                      :style="'height: ' + (fieldInfo.height ? fieldInfo.height : 125) + 'px;'"
                      :name="fieldInfo.title"
                      v-validate="fieldInfo.validate"
                      :class="{'is-invalid': errors.has(fieldInfo.title)}"
                    ></textarea>
                  </template>
                  <template
                    v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 0"
                  >
                    <div class="m-2">
                      <span
                        v-for="(item, index) in fieldInfo.items"
                        class="checkbox checkbox-primary"
                      >
                        <input
                          type="checkbox"
                          v-model="fieldInfo.value"
                          :id="fieldInfo.title + '_' + item.id"
                          :value="item.value"
                          :name="fieldInfo.title"
                          v-validate="fieldInfo.validate"
                        />
                        <label
                          :for="fieldInfo.title + '_' + item.id"
                          class="mr-2"
                        >
                          {{ item.value }}
                        </label>
                      </span>
                    </div>
                  </template>
                  <template
                    v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 1"
                  >
                    <div class="m-2">
                      <div
                        v-for="(item, index) in fieldInfo.items"
                        class="checkbox checkbox-primary"
                      >
                        <input
                          type="checkbox"
                          v-model="fieldInfo.value"
                          :id="fieldInfo.title + '_' + item.id"
                          :value="item.value"
                          :name="fieldInfo.title"
                          v-validate="fieldInfo.validate"
                        />
                        <label
                          :for="fieldInfo.title + '_' + item.id"
                          class="mr-2"
                        >
                          {{ item.value }}
                        </label>
                      </div>
                    </div>
                  </template>
                  <template
                    v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 0"
                  >
                    <div class="m-2">
                      <span
                        v-for="(item, index) in fieldInfo.items"
                        class="radio radio-primary"
                      >
                        <input
                          type="radio"
                          v-model="fieldInfo.value"
                          :id="item.value"
                          :value="item.value"
                          :name="fieldInfo.title"
                          v-validate="fieldInfo.validate"
                        />
                        <label :for="item.value" class="mr-2">
                          {{ item.value }}
                        </label>
                      </span>
                    </div>
                  </template>
                  <template
                    v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 1"
                  >
                    <div class="m-2">
                      <div
                        v-for="(item, index) in fieldInfo.items"
                        class="radio radio-primary"
                      >
                        <input
                          type="radio"
                          v-model="fieldInfo.value"
                          :id="item.value"
                          :value="item.value"
                          :name="fieldInfo.title"
                          v-validate="fieldInfo.validate"
                        />
                        <label :for="item.value" class="mr-2">
                          {{ item.value }}
                        </label>
                      </div>
                    </div>
                  </template>
                  <template v-else-if="fieldInfo.fieldType === 'SelectOne'">
                    <select
                      :name="fieldInfo.title"
                      v-model="fieldInfo.value"
                      class="form-control"
                      :class="{'is-invalid': errors.has(fieldInfo.title) }"
                      v-validate="fieldInfo.validate"
                    >
                      <option
                        v-for="item in fieldInfo.items"
                        :value="item.value"
                        >{{ item.value }}</option
                      >
                    </select>
                  </template>
                  <template
                    v-else-if="fieldInfo.fieldType === 'SelectMultiple'"
                  >
                    <select
                      multiple
                      style="height: 130px"
                      :name="fieldInfo.title"
                      v-model="fieldInfo.value"
                      class="form-control"
                      :class="{'is-invalid': errors.has(fieldInfo.title) }"
                      v-validate="fieldInfo.validate"
                    >
                      <option
                        v-for="item in fieldInfo.items"
                        :value="item.value"
                        >{{ item.value }}</option
                      >
                    </select>
                  </template>

                  <template v-else-if="fieldInfo.fieldType === 'Image'">
                    <file-pond
                      :allow-multiple="false"
                      :server="getUploadUrl(fieldInfo)"
                      :files="files"
                      accepted-file-types="image/jpeg, image/png, image/webp"
                      label-idle="点击上传或将图片拖动至此区域..."
                      label-file-processing="上传中..."
                      label-file-processing-complete="上传成功"
                      v-on:processfile="imageUploaded"
                      v-on:removefile="imageRemoved(fieldInfo)"
                    ></file-pond>

                    <input
                      v-model="fieldInfo.value"
                      type="hidden"
                      :name="fieldInfo.title"
                      v-validate="fieldInfo.validate"
                      :class="{'is-invalid': errors.has(fieldInfo.title)}"
                    />
                  </template>

                  <template v-else-if="fieldInfo.fieldType === 'Date'">
                    <date-picker
                      style="width: 100%"
                      :name="fieldInfo.title"
                      v-model="fieldInfo.value"
                      type="date"
                      format="YYYY年MM月DD日"
                      :minute-step="1"
                      :clearable="false"
                      :editable="false"
                      v-validate="fieldInfo.validate"
                    ></date-picker>
                  </template>
                  <template v-else-if="fieldInfo.fieldType === 'DateTime'">
                    <date-picker
                      style="width: 100%"
                      :name="fieldInfo.title"
                      v-model="fieldInfo.value"
                      type="datetime"
                      format="YYYY年MM月DD日 HH:mm"
                      :minute-step="1"
                      :clearable="false"
                      :editable="false"
                      v-validate="fieldInfo.validate"
                    ></date-picker>
                  </template>
                  <template v-else>
                    <input
                      v-model="fieldInfo.value"
                      type="text"
                      class="form-control"
                      :name="fieldInfo.title"
                      v-validate="fieldInfo.validate"
                      :class="{'is-invalid': errors.has(fieldInfo.title)}"
                    />
                  </template>
                </div>
              </div>
            </div>
            <hr />
            <div class="text-center">
              <button
                type="button"
                @click="btnSubmitClick"
                class="btn btn-primary w-md mr-2"
              >
                保 存
              </button>
              <button
                type="button"
                @click="btnNavClick('logs.html')"
                class="btn btn-default w-md"
              >
                返 回
              </button>
            </div>
          </form>
        </div>
      </template>
      <template v-else>
        <div class="text-center" style="margin-top: 100px">
          <img class="mt-3" src="../assets/images/loading.gif" />
          <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
        </div>
      </template>
    </div>
  </body>
</html>
<script src="../assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../assets/lib/lodash-4.17.10.min.js"></script>
<script src="../assets/lib/layer-3.1.1/layer.js"></script>
<script src="../assets/lib/sweetalert2-7.28.4.all.min.js"></script>
<script src="../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../assets/lib/js.cookie-2.2.0.js"></script>
<script src="../assets/lib/es6-promise.auto.min.js"></script>
<script src="../assets/lib/axios-0.18.0.min.js"></script>
<script src="../assets/lib/vue2-datepicker-2.4.3.min.js"></script>

<link
  href="../assets/lib/filepond/filepond-4.4.2.min.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.min.css"
  rel="stylesheet"
  type="text/css"
/>
<script src="../assets/lib/filepond/babel-polyfill-7.4.4.min.js"></script>
<script src="../assets/lib/filepond/filepond-polyfill-1.0.4.min.js"></script>
<script src="../assets/lib/filepond/filepond-plugin-file-validate-type-1.2.4.min.js"></script>
<script src="../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.js"></script>
<script src="../assets/lib/filepond/filepond-4.4.2.min.js"></script>
<script src="../assets/lib/filepond/vue-filepond-5.1.0.min.js"></script>

<script src="../assets/js/utils.js" type="text/javascript"></script>
<script src="logAdd.js" type="text/javascript"></script>
